<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>生命周期=====》一个vue实例从创建到销毁的一个过程</h1>
			<button @click="islogin = !islogin">关闭login组件，在控制台查看vue实例的生命周期</button>
			<login v-if="islogin"></login>
		</div>
		<template id="Login">
			<div>
				<p>{{msg}}</p>
				<button type="button" @click="msg='你好啊'">点击更新数据，控制台查看生命周期log</button>
			</div>
		</template>
		
		<script type="text/javascript">
			const login = {
				template:"#Login",
				data(){
					return {
						msg:"我是一条信息"
					}
				},
				beforeCreate() {
					console.group('------beforeCreate创建前状态------');
				},
				created() {
					console.group('------created创建完毕状态------');
				},
				beforeMount() {
					console.group('------beforeMount挂载前状态------');
				},
				mounted() {
					console.group('------mounted 挂载结束状态------');
				},
				beforeUpdate() {
					console.group('------beforeUpdate更新前状态-----')
				},
				updated() {
					console.group('------updated更新结束状态------')
				},
				beforeDestroy() {
					console.group('------beforeDestroy销毁前状态---------')
				},
				destroyed() {
					console.group('-------destroyed销毁完成--------')
					alert("组件销毁完成")
					console.clear()
				}
			}
			new Vue({
				el:"#app",
				data:{
					islogin:true
				},
				// beforeCreate() {
				// 	console.group('------beforeCreate创建前状态------');
				// },
				// created() {
				// 	console.group('------created创建完毕状态------');
				// },
				// beforeMount() {
				// 	console.group('------beforeMount挂载前状态------');
				// },
				// mounted() {
				// 	console.group('------mounted 挂载结束状态------');
				// },
				// beforeUpdate() {
				// 	console.group('------beforeUpdate更新前状态-----')
				// },
				// updated() {
				// 	console.group('------updated更新结束状态------')
				// },
				// beforeDestroy() {
				// 	console.group('------beforeDestroy销毁前状态---------')
				// },
				// destroyed() {
				// 	console.group('-------destroyed销毁完成--------')
				// },
				components:{
					login
				}
			})
		</script>
	</body>
</html>
